<template>
  <div>
    <library
      :visiblity="visiblity"
      title="特效库"
      :level="1"
      :typeList="sfxTypeList"
      :data="listData"
      @close="close"
      @click-left="clickLeft"
      @click-top="clickTop"
      @selected="selected"
    >
      <el-pagination
        style="display:inline-block;"
        background
        layout="prev, pager, next"
        :total="100"
      ></el-pagination>
      <el-button type="primary" class="btn">确 定</el-button>
      <el-button class="btn" @click="close">取 消</el-button>
    </library>
  </div>
</template>

<script>
import library from '@/pages/common/library';

export default {
    components: {
        library,
    },
    props: {
        visiblity: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            sfxTypeList: [
                { type: '炫酷', key: 1 },
                { type: '红火', key: 2 },
                { type: '科技', key: 3 },
                { type: '天气', key: 4 },
            ],
            listData: [1, 2, 3, 4, 5, 6, 7,8,11,22,33,44,55,66,77,88,99,12],
        };
    },
    methods: {
        close() {
            this.$emit('close');
        },
        clickLeft(key) {},
        clickTop( topKey) {
            console.log( topKey);
        },
        selected(data){
          console.log('data :', data);
        }
    },
};
</script>

<style lang="scss" scoped>
</style>